/** General: Typography */
@use './mixins' as *;

:root {
  --custom-heading-decorative-line-color: var(--strapi-neutral-150);
  color: var(--strapi-neutral-700);
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
  --ifm-heading-color: var(--strapi-neutral-800);
  --ifm-heading-font-weight: 600;
  --ifm-code-font-size: 70%;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, .markdown h1:first-child {
  --ifm-h1-font-size: var(--strapi-font-size-xxxl);
  font-size: var(--strapi-font-size-xxxl);
  line-height: var(--strapi-line-height-xxxl);
}

h2, .markdown > h2 {
  --ifm-h2-font-size: var(--strapi-font-size-xxl);
  font-size: var(--strapi-font-size-xxl);
  --ifm-heading-line-height: var(--strapi-line-height-xxl);
  line-height: var(--strapi-line-height-xxl);
  padding-top: 24px;
}

h2 + p, .markdown > h2 + p {
  padding-top: 6px;
}

h2 + table, .markdown > h2 + table {
  padding-top: -2px;
}

h2 + img, .markdown > h2 + img {
  padding-top: 28px;
}

h3, .markdown > h3 {
  --ifm-h3-font-size: var(--strapi-font-size-xl);
  font-size: var(--strapi-font-size-xl);
  line-height: var(--strapi-line-height-xl);
  padding-bottom: 0;
  @include flex-row;
}

h4, .markdown > h4 {
  --ifm-h4-font-size: var(--strapi-font-size-lg);
  line-height: var(--strapi-line-height-lg);
}

.markdown h2 > img,
.markdown h3 > img,
.markdown h4 > img {
  margin-bottom: 0 !important;
  vertical-align: bottom;
  margin-right: 8px;
}

p {
  color: var(--strapi-neutral-700);
}

p, ul {
  img {
    display: inline-block;
    vertical-align: text-bottom;
  }
}

.markdown li {
  padding-bottom: 4px;
}

.markdown a {
  font-weight: 600;
}

.markdown a i.strapi-icons.external-link,
.markdown a .strapi-icons.external-link {
  display: inline-block;
  text-decoration: none !important;
}

.markdown a i.strapi-icons::before,
.markdown a .strapi-icons.external-link::before {
  display: inline-block;
  text-decoration: none !important;
}

.markdown a:hover i.strapi-icons,
.markdown a:active i.strapi-icons,
.markdown a:focus i.strapi-icons,
.markdown a:hover .strapi-icons.external-link,
.markdown a:active .strapi-icons.external-link,
.markdown a:focus .strapi-icons.external-link {
  text-decoration: none !important;
}

.identity-card + h2 {
  margin-top: 0;
  padding-top: 0;
}

/** Dark mode */
@include dark {
  h1, h2, h3, h4, h5, h6 {
    --ifm-heading-color: var(--strapi-neutral-900);
  }
}
